<template>
  <div
    class="copyright-box"
    :class="{ 'copyright-box-loop': route.meta.loopType }"
    style="display: flex; justify-content: space-between; flex-direction: column"
  >
    <div style="width: 100%" class="copyright">
      <t-row>
        <t-col :span="6">
          <div class="title">
            <titles title="学术研究" />
          </div>
        </t-col>
        <t-col :span="6">
          <div class="right-box">
            <t-popup content="" placement="bottom">
              <template #content>
                <div class="pop-box">
                  <div
                    ref="changColorAllRef"
                    class="pop-item hw-click-cursor"
                    @click="setTypeId(0)"
                    @mouseenter="changColorAll(0)"
                    @mouseleave="returnColorAll(0)"
                  >
                    全部
                  </div>
                  <div
                    ref="changColoRef"
                    class="pop-item hw-click-cursor"
                    @click="setTypeId(item)"
                    v-for="(item, index) in selectList"
                    :key="item.id"
                    @mouseenter="changColor(index)"
                    @mouseleave="returnColor(index)"
                  >
                    {{ item.text }}
                  </div>
                  <!-- <div class="pop-item hw-click-cursor">论著</div>
                    <div class="pop-item hw-click-cursor">展览</div> -->
                </div>
              </template>
              <div class="pop-heard">
                <span>{{ TypeTitle }}</span>
                <t-icon name="chevron-down" size="24"></t-icon>
              </div>
            </t-popup>
          </div>
        </t-col>
      </t-row>

      <t-row v-if="total > 0">
        <t-col :span="12" v-for="item in list" :key="item.id" @click="pathInfo(item.id)">
          <div class="item-box">
            <div class="item-left">
              <div class="title1">
                <p class="title1-color" :style="{ color: store.styleInfo.shmentColor }">
                  {{
                    item.typeId == 401792425939013
                      ? '【课题研究】'
                      : item.typeId == 401792277585989
                      ? '【出版刊物】'
                      : item.typeId == 401792091619397
                      ? '【论文论著】'
                      : ''
                  }}
                </p>
                <p :style="{}" class="title-name">{{ item.name }}</p>
              </div>
              <span class="title2">{{ item.publishedOn }}</span>
            </div>
            <div class="item-right">
              <p class="title3" :style="{}">{{ item.author }} 编</p>
              <span class="title4">{{ item.publisher }}</span>
            </div>
          </div>
        </t-col>
      </t-row>
      <div v-else style="position: absolute; top: 50%; left: 50%">暂无相关数据</div>
    </div>
    <t-row style="margin-top: 50px" v-if="total > 8">
      <t-col
        :span="12"
        style="display: flex"
        :class="{
          't-pagination0': store.styleInfo.themeColor == '#CFBDA8',
          't-pagination1': store.styleInfo.themeColor == '#8F9EBF',
          't-pagination2': store.styleInfo.themeColor == '#B9463F',
          't-pagination3': store.styleInfo.themeColor == '#343029',
          't-pagination4': store.styleInfo.themeColor == '#171719',
        }"
      >
        <t-pagination
          v-model="parmas.pageNo"
          v-model:pageSize="parmas.pageSize"
          :total="total"
          :showPageSize="false"
          show-jumper
          @change="onChange"
          @page-size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
        <t-button
          @click="init()"
          :style="{ background: store.styleInfo.themeColor, borderColor: store.styleInfo.themeColor }"
          >确定</t-button
        >
      </t-col>
    </t-row>
    <!-- <researchInfo v-else /> -->
  </div>
</template>

<script setup lang="ts">
import { pathList, pathListLoop } from '../route';
import { treeList } from '@/api/user/user';
import heardTitle from './heardTitle.vue';
import titles from '@/components/title/title.vue';
import { investigationList } from '@/api/investigation/investigation';
import researchInfo from './researchInfo.vue';
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const router = useRouter();
const route = useRoute();
const current = ref(1);
const pageSize = ref(20);
const types = ref(true);
const parmas = reactive({
  value: '',
  pageNo: 1,
  pageSize: 8,
  typeId: 0,
});
const TypeTitle = ref('全部');
const selectList = ref([]);
const list = ref([]);
const total = ref(0);
const loading = ref(false);
const changColorAllRef = ref(null);
const changColoRef = ref(null);
const init = async () => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await investigationList(localStorage.getItem('projectId'), parmas);
    total.value = res.data.total;
    list.value = res.data.data;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
init();
const getSelectList = async () => {
  let res = await treeList(395711118516293); //级别
  selectList.value = res.data;
};
getSelectList();
const setTypeId = (e: any) => {
  parmas.pageNo = 1;
  if (e === 0) {
    parmas.typeId = 0;
    TypeTitle.value = '全部';
  } else {
    parmas.typeId = e.id;
    TypeTitle.value = e.text;
  }
  init();
};
const onPageSizeChange = (size) => {
  // console.log('page-size:', size);
  // MessagePlugin.success(`pageSize变化为${size}`);
  init();
};

const onCurrentChange = (index, pageInfo) => {
  // MessagePlugin.success(`转到第${index}页`);
  // console.log(pageInfo);
  init();
};

const onChange = (pageInfo) => {
  // console.log(pageInfo);
  // init();
};
const pathInfo = (e: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[4] : pathList[4],
    query: {
      id: e,
    },
  });
};
const changColorAll = (index: number) => {
  changColorAllRef.value.style.background = store.styleInfo.auxiliaryColor;
  changColorAllRef.value.style.color = store.styleInfo.fontColor;
};
const returnColorAll = (index: number) => {
  changColorAllRef.value.style.background = '#fff';
  // changColorAllRef.value.style.color = store.styleInfo.fontColor;
};
const changColor = (index: number) => {
  changColoRef.value[index].style.background = store.styleInfo.auxiliaryColor;
  changColoRef.value[index].style.color = store.styleInfo.fontColor;
};
const returnColor = (index: number) => {
  changColoRef.value[index].style.background = '#fff';
  // changColorAllRef.value.style.color = store.styleInfo.fontColor;
};
</script>

<style lang="less" scoped>
.copyright-box {
  padding: 80px 0px;
  width: 1180px;
  margin: 0 auto;
  min-height: calc(@screen-hw-div-parent - 138px);
}
.copyright-box-loop {
  min-height: calc(@screen-hw-div-parent-btn-loop - 138px);
}

.right-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 100px;
}
.title {
  display: flex;
  justify-content: left;
  align-items: center;
  // margin-top: 50px;
}
.item-box {
  cursor: pointer;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 24px;
}
.item-left {
  width: 670px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-right {
  display: flex;
  flex-direction: column;
  text-align: right;
  width: 280px;
}
.title1 {
  display: flex;
  font-size: 17px;
  // font-weight: bold;
  color: #333333;
  line-height: 32px;
  white-space: nowrap;
  font-family: SourceHanSerifCN-Bold;
  p {
    white-space: nowrap;
    font-family: SourceHanSerifCN-Bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .title-name {
    flex: 1;
  }
}
.title1-color {
  width: 100px;
  color: #c7ab8b;
}
.title2 {
  font-size: 14px;
  // font-family: Roboto-Regular, Roboto;
  font-weight: 400;
  color: #999999;
  line-height: 26px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.title3 {
  font-size: 17px;
  // font-weight: 500;
  color: #333333;
  line-height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.title4 {
  font-size: 14px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 26px;
  max-width: 570px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pop-heard {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
.pop-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px 0px;
}
.pop-item {
  display: flex;
  width: 100%;
  padding: 7px 20px;
  font-size: 13px;
}
.pop-item:hover {
  // background: #f0e9e1;
  // color: none !important;
}
/deep/.t-popup__content {
  padding: 8px !important;
}
.t-pagination0 {
  :deep(.t-is-current) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
  :deep(.t-pagination__number:hover) {
    border-color: #f0e9e1;
    background: #f0e9e1;
  }
}
.t-pagination1 {
  :deep(.t-is-current) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
  :deep(.t-pagination__number:active) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
  :deep(.t-pagination__number:hover) {
    border-color: #f0f3f6;
    background: #f0f3f6;
  }
}
.t-pagination2 {
  :deep(.t-is-current) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
  :deep(.t-pagination__number:active) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
  :deep(.t-pagination__number:hover) {
    border-color: #faf5ed;
    background: #faf5ed;
  }
}
.t-pagination3 {
  :deep(.t-is-current) {
    background: #343029 !important;
    border-color: #343029 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #343029 !important;
    border-color: #343029 !important;
  }
  :deep(.t-pagination__number:hover) {
    border-color: #e0e5e6;
    background: #e0e5e6;
  }
}
.t-pagination4 {
  :deep(.t-is-current) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
  :deep(.t-pagination__number:hover) {
    border-color: #e1dfe0;
    background: #e1dfe0;
  }
}
/deep/.t-pagination__number:hover {
  color: #333;
}
/deep/.t-is-current:hover {
  color: var(--td-text-color-anti);
}
/deep/.t-input:hover {
  border-color: var(--td-component-border);
}
/deep/.t-input.t-is-error {
  border-color: var(--td-component-border);
}
/deep/.t-input--focused {
  box-shadow: 0 0 0 0 !important;
}
/deep/.t-is-current:hover {
  color: #fff !important;
}
/deep/.t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost) {
  --ripple-color: none;
}
</style>
